<template>
  <n-card :bordered="false" class="proCard table">
    <n-form
        ref="formRef"
        :model="formValue"
        :rules="rules"
        label-placement="left"
        :label-width="100"
        style="max-width: 500px;margin: 0 auto;"
      >
        <n-form-item label="医院名称" path="hosname">
          <n-input
            placeholder="请输入医院名称"
            v-model:value="formValue.hosname"
          />
        </n-form-item>
        <n-form-item label="医院编码" path="hoscode">
          <n-input
            placeholder="请输入医院编码"
            v-model:value="formValue.hoscode"
          />
        </n-form-item>
        <n-form-item label="api基础路径" path="apiUrl">
          <n-input
            placeholder="请输入api基础路径"
            v-model:value="formValue.apiUrl"
          />
        </n-form-item>
        <n-form-item label="联系人姓名" path="contactsName">
          <n-input
            placeholder="请输入联系人姓名"
            v-model:value="formValue.contactsName"
          />
        </n-form-item>
        <n-form-item label="联系人手机" path="contactsPhone">
          <n-input
            placeholder="请输入联系人手机"
            v-model:value="formValue.contactsPhone"
          />
        </n-form-item>
        <div style="margin-left: 100px">
          <n-space>
            <n-button type="primary" @click="saveOrUpdate">保存</n-button>
            <n-button @click="resetForm">重置</n-button>
          </n-space>
        </div>
      </n-form>
  </n-card>
</template>
<script setup>
import { useMessage } from 'naive-ui';
import { reactive, ref } from 'vue';
import { saveHospSet } from '@/api/hospset'
import { useRouter } from 'vue-router';

const rules = {
  hosname: {
    required: true,
    trigger: ['blur', 'input'],
    message: '请输入医院名称',
  },
}

const message = useMessage()
const router = useRouter()
const formRef = ref(null)
const defaultValueRef = () => ({
  hosname: '',
  hoscode: '',
  apiUrl: '',
  contactsName: '',
  contactsPhone: ''
});

const formValue = reactive(defaultValueRef())

// 添加
const saveOrUpdate = () => {
  formRef.value.validate(async (errors) => {
    if (errors) {
      return message.error('验证失败，请填写完整信息')
    }
    try {
      await saveHospSet(formValue)
      // 跳转到列表页面
      router.push({ path: '/hospSet/list' })
    } catch (error) {
      console.log(error);
    }
  });
}

// 重置表单
const resetForm = () => {
  formRef.value.restoreValidation();
  Object.assign(formValue, defaultValueRef());
}
</script>